<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    li{
      font-weight: bold;
    }
    .child{
      margin-left: 2em;
    }
    .red{
      color: #c40001;
    }
    .green{
      color: green;
    }
    .blue{
      color: #1a55fb;
    }
  </style>
</head>
<body>
  <h1>数据-变量-内存</h1>
  <ul>
    <li>1、什么是数据</li>
    <p>* 存储在内存中代表特定信息的‘东西’，本质上是0101..</p>
    <p>* 数据的特点：可传递，可运算</p>
    <p>* 内存中所有操作的目标：数据</p>
    <p class="child">* 算术运算</p>
    <p class="child">* 逻辑运算</p>
    <p class="child">* 赋值运算</p>
    <li>2、什么是内存</li>
    <p>*  内存条通电以后产生的用来存储可存储数据的空间（临时的）</p>
    <p>* 内存产生和死亡：内存条（电路板）==> 通电===>产生空间===>存储数据===>处理数据===>断电===>内存空间和数据都消失</p>
    <li>3、什么是变量</li>
    <p>* 可变化的量，由变量名和变量值组成</p>
    <p>* 每个变量都对应一块小内存，变量名用来查找到对应的内存，变量值就是内存中保存的数据</p>
    <p class="green">* 一块小内存有两个数据：内部存储的数据；地址值</p>
    <p class="green">* 内存的分类：</p>
    <p class="child">栈：全局变量/局部变量</p>
    <p class="child">堆：对象</p>
    <li class="red">4、内存-变量-数据之间的关系</li>
    <p>* 内存是用来存储数据的临时空间</p>
    <p>* 变量是内存的标识</p>
  </ul>
  <hr/>
  <ul>
    <li class="red">问题：var a = xxx a在内存中保存的是什么</li>
    <p>* xxx 是基本数据，保存的就是这个数据</p>
    <p>* xxx 是对象，保存的是对象的地址值</p>
    <p class="blue">* xxx 是变量，保存的xxx的内存内容（可能是基本数据也可能是地址值）</p>
  </ul>
  <hr/>
  <ul>
    <li>关于引用变量赋值问题</li>
    <p>* n个引用变量指向同一个变量，通过一个变量修改对象内的数据，其他所有变量看到的是修改后的数据</p>
    <p>* 2个引用变量指向同一个对象，让其中一个引用变量指向另一个对象，另一个引用变量依然指向前一个对象</p>
  </ul>
  <script>
      console.group('关于引用变量赋值问题')
      var obj1 = {name:'jack'}
      var obj2 = obj1
      obj1.name = 'A'
      console.log(obj2.name)
      // =========
      var a = {age:12}
      var b = a
      a = {name:'BOB',age:13}
      b.age = 14
      console.log(b.age,a.name,a.age)//14 "BOB" 13
      function fn(obj){
        obj={age:10}
      }
      fn(a)//执行函数实参a传入函数,函数会创建一个obj临时对象，但是不会影响a对象
      console.log(a.age)//13
      console.groupEnd()
  </script>
  <hr />
  <ul>
    <li>问题：在js调用函数传递变量时，是值传递还是引用传递（是值传递）</li>
    <p>* 理解1：都是值（基本/地址值）传递</p>
    <p>* 理解2：可能是指传递也可能是引用传递（地址值）</p>
  </ul>
  <script>
    console.group('js调用函数传递变量')
    var a = 3
    function changeA(a){
      a = a + 4
    }
    changeA(a)
    console.log(a)
    function fn2(obj){
      console.log(obj.name)
    }
    var o = {name:'tom'}
    fn2(o)
    console.groupEnd()
  </script>
  <hr />
  <ul>
    <li>js如何管理内存</li>
    <p>
      1、内存生命周期
      <p class="child">* 分配小内存空间，得到它的使用权</p>
      <p class="child">* 存储数据，可以反复进行操作</p>
      <p class="child">* 释放小内存空间</p>
    </p>
    <p>2、释放内存
      <p class="child">局部变量：函数执行完自动释放</p>
      <p class="child">对象：称为垃圾对象由垃圾回收机制回收</p>
    </p>
  </ul>
  <script>
    console.group('js如何管理内存')
    var a = 3
    var obj = {}
    obj = null
    function fn4(){
      var b = {}
    }
    fn4()//执行完b自动释放，b所指定的对象是在后面某个时刻有垃圾回收机制回收
    console.groupEnd()
  </script>
</body>
</html>